<!--督办填写页面-->
<script setup>
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { useRouter } from 'vue-router/composables'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import {
  disposeOrderListCanBeSupervised,
  disposeOrderSupervise
} from '@/apis/order.js'
import CustomStepper from '@/views/workOrder/components/CustomStepper.vue'
import { Toast } from 'vant'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'
import RemoteSelect from '@/views/supervise/components/RemoteSelect.vue'

const router = useRouter()
const submitLoading = ref(false)
const superviseFormRef = ref('')
const formData = reactive({
  orderNo: '',
  nodeIdList: [],
  timeoutDays: 0,
  opinion: '',
  attachmentInfo: [],
  rules: {
    opinion: [
      {
        required: true,
        message: '请填写督办意见',
      }
    ]
  }
})

const isShowFFJG = ref(false)
// 提交表单
async function submitForm() {
  superviseFormRef.value
    .validate()
    .then(async () => {
      try {
        submitLoading.value = true
        const params = {
          orderNo: router.currentRoute.query.orderNo,
          nodeIdList: formData.nodeIdList.map((item) => item.value),
          timeoutDays: formData.timeoutDays,
          opinion: formData.opinion,
          attachmentInfo: formData.attachmentInfo?.map((item) => ({
            originalName: item.originalName,
            url: item.url
          }))
        }
        const res = await disposeOrderSupervise(params)
        submitLoading.value = false
        if (res.ret === 0) {
          Toast.success('保存成功')
          router.back()
        } else {
          Toast.fail(res.msg || '保存失败')
        }
      } catch (error) {
        submitLoading.value = false
        Toast.fail('网络错误，请稍后再试~')
      }
    })
    .catch((error) => {
      Toast(error[0].message)
    })
}

onMounted(async () => {
  formData.orderNo = router.currentRoute.query.orderNo
})
</script>

<template>
  <div class="bg-#F7F8FA h-full">
    <van-form
      ref="superviseFormRef"
      class="bg-white"
      scroll-to-error
      :show-error-message="false"
      validate-first
    >
      <van-field
        readonly
        required
        name="sourceType"
        label="督办指挥中心"
        placeholder="请选择"
        input-align="right"
        is-link
        label-class="text-16px"
        class="org-select"
        @click="isShowFFJG = true"
      >
        <template #input>
          <div class="flex flex-col">
            <div
              v-for="item in formData.nodeIdList"
              :key="item.value"
              class="w-50vw overflow-x-auto whitespace-nowrap text-align-end"
            >
              {{ item.label }}
            </div>
          </div>
        </template>
      </van-field>
      <van-field
        name="stepper"
        label-class="text-16px"
        label="办结时限"
        readonly
        required
        input-align="right"
      >
        <template #input>
          <CustomStepper :model-value.sync="formData.timeoutDays" />
          <span class="ml-10px">天</span>
        </template>
      </van-field>
      <CustomTextarea required :rules="formData.rules.opinion" :modelValue.sync="formData.opinion" label="督办意见" />
    </van-form>
    <div class="px-16px mt-8px bg-white">
      <DetailItem label="附件" top>
        <FileList
          removable
          :upload="true"
          :preview="true"
          :files.sync="formData.attachmentInfo"
          :imageMax="9"
          :otherMax="0"
        >
          <template #empty="{ handleUpload }">
            <div class="h-80px w-80px" @click="handleUpload">
              <UploadTrigger icon-size="7vw" />
            </div>
          </template>
        </FileList>
      </DetailItem>
    </div>
    <div class="py-24px px-16px">
      <van-button
        :disabled="
          formData.nodeIdList.length === 0 || !formData.timeoutDays || !formData.opinion
        "
        type="primary"
        size="normal"
        block
        @click="submitForm"
        :loading="submitLoading"
      >
        确定
      </van-button>
    </div>
    <RemoteSelect
      :show.sync="isShowFFJG"
      :model-value.sync="formData.nodeIdList"
      :api="
        () =>
          disposeOrderListCanBeSupervised({
            orderNo: router.currentRoute.query.orderNo || ''
          })
      "
      multiple
      title="选择督办指挥中心"
      :key-label="['chooseOrgName', 'orgName']"
      key-value="id"
    />
  </div>
</template>

<style scoped lang="less">
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.org-select.van-cell--required::before {
  left: 30vw;
}
.van-cell--required::before {
  left: 22vw;
}
</style>
